<template>
  <div class="app">

    <div class="com">
      <div class="com_center"></div>
    </div>
    <div>
      <el-row>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
      </el-row>

      <!-- <ul>

        <li v-for="(item,index) in lists" @click="choose(index)" :class="{active: index == current}" :key="index">
          {{item}}
        </li>

      </ul> -->

      <!-- <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul> -->
    </div>
    <div class="text">
      注册用户登录后才能发表评论，注册用户登录后才能发表评论，请 登录 或 注册， 访问 网站首页请 登录 或 注册， 访问 网站首页注册用户登录后才能发表评论，请 登录 或 注册， 访问 注册用户登录后才能发表评论，请 登录 或 注册， 访问 网站首页注册用户登录后才能发表评论，请 登录 或 注册， 访问 网站首页网站首页
    </div>
    <form action="/example/html5/demo_form.asp">
      <input type="text" autofocus name="tel">
      <input type="submit" value="请提交">
    </form>
    <div>
      <input type="button" @click="toggle" value="显示/隐藏">
      <h3 v-if="flag">这里是用V-if控制的元素</h3>
      <h3 v-show="flag">这里是用V-show控制的元素</h3>
    </div>
    <!-- <form method="" action="">
      <p>姓名: <input type="text" name="fullname" placeholder="莫李广"></p>
      <p>邮箱: <input type="email" name="address" placeholder="john@example.net"></p>

    </form>
    <el-button type="text" @click="atdd()">点击登陆</el-button>
    <form action="/example/html5/demo_form.asp">
      <input type="url">
      <input type="submit" value="提交">
    </form>
    <form action="/example/html5/demo_form.asp">
      <input type="number" min="1" max="100" step="1">
      <input type="submit" value="提交">
    </form>
    <form action="/example/html5/demo_form.asp">
      <input type="search">
      <input type="submit" value="提交">
    </form>
    <form action="/example/html5/demo_form.asp">
      <input type="text" autocomplete="on" name="tel">
      <input type="submit" value="提交">
    </form> -->
    <!-- <form method="" action=""> -->
    <!-- Homepage: <input name="hp" type="url" list="hpurls">
    <datalist id="hpurls">
      <option value="http://www.google.com/" label="Google">
      <option value="http://www.reddit.com/" label="Reddit">
    </datalist> -->
    <!-- </form> -->
  </div>
</template>
<script>
//冒泡排序
let arr = [3,4,1,2,5,6,8,100];
let max = arr.length -1;
for(let i = 0; i<max; i++){
  //声明一个变量作为标志
  //如果某次循环过后，没有任何两数进行交换，就将标志位设置为true,标识排序完成
  let flag = true;
  for (let j=0; j<max-i;j++){
    if(arr[j]>arr[j+1]){
      //利用es6解构赋值交换数据
      [arr[j],arr[j+1]] = [arr[j+1],arr[j]];
      flag =false;
    }
  }
  if(flag){
    break;
  }
  console.log(arr)
}

// Array.prototype.sort = function () {

// }


// let aa = arr.sort(function(a,b){
 
//   return b-a;
// })
// console.log(aa);
function qc (arr){
  let a = [...new Set(arr)];
  return a;
}

console.log(qc([1,23,3,3]));
function qq(arr){
  let a = [...new Set(arr)];
  return a;
}
console.log(qq([1,1,2,6,2,5,8,8]))

// var a, b = 0, fn = function () {
//   var a = b = 3;
// };
// fn();
// console.log(a, b);
// var b = { a: 1 }[0];
// console.log(b)
// !function () {
//   this.length = 10;
//   var fn = function () {
//     console.log(this.length);  //输出多少？
//   }, arr = [fn, 'hello layui'];
//   fn.length = 100;
//   arr[0]();
// }();
//b的值
// var ul = document.querySelector("ul");
// 　　ul.addEventListener("mousedown", mouseHandler);
// 　　function mouseHandler (e) {
//   e.preventDefault();
//   if (e.target.nodeName !== "LI") return;
//   var arr = Array.from(ul.children);
//   var index = arr.indexOf(e.target);
//   console.log(index);
// 　　}
// var a = 10;
// var b = a;
// b = 20;
// console.log(a);
// console.log(b);
// var obj1 = new Object();
// var obj2 = obj1;
// console.log(obj1)
// obj2.name = "我的名字";
// console.log(obj1.name);
// var a = [1, 2, 3, 4, 5];
// var b = a;//传址，对象中传给变量的数据是引用类型，会储存在堆中；
// var c = a[0];//传值，储存在栈内存中；改变栈中的数据不会影响堆中的数据
// let arr = [3, 4, 1, 2];
// let len = arr.length;
// for (let i = 0; i < len - 1; i++) {
//   let min = arr[i]
//   for (let j = i + 1; j < len; j++) {
//     if (arr[j] < min) {
//       [arr[j], min] = [min, arr[j]]
//     }
//   }
//   arr[i] = min;
// }
// console.log(arr);

export default {
  name: "Mnjy",
  components: {},
  data () {
    return {
      flag: true,
      current: '',
      lists: [1, 2, 3, 4, 5, 6, 7, 8, 9],

      msg: 'Hello Vue!',
      count: -1,
      styleMsg: {
        color: 'red',
        textShadow: ' 0 0 3px green'
      },
      list: [{ name: '李广', age: 25 },
      { name: '若正', age: 26 }]
    }
  },
  watch: {
    msg: function (nemval, oldval) {
      console.log('nemval is:' + nemval)
      console.log('oldval is:' + oldval)
    }
  },
  methods: {
    toggle () {
      this.flag = !this.flag;
    },
    choose (index) {
      this.current = index
    }
  },
  atdd () {
    alert("kkk");
  },

}
</script>
<style lang="scss">
li.active {
  background-color: yellow;
}
.com {
  width: 400px;
  height: 200px;
  background-color: red;
  position: relative;
  // display: flex;
  // justify-content: center;
  // align-items: center;

  &_center {
    width: 100px;
    height: 100px;
    background-color: green;
    position: absolute;
    // left: 50%;
    // top: 50%;
    // transform: translate(-50%, -50%);
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
.text {
  background-color: #fff;
  // overflow: hidden;
  // text-overflow: ellipsis;
  // white-space: nowrap;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
</style>


